<template>
  <div class="news">
    <v-header :title="this.$route.meta.title"></v-header>
    <div class="listCon">
      <van-list class="list" v-for="(item, index) in news" :key="index">
        <van-cell
          v-if="Object.values(item).length > 1"
          :to="'/newsinfo/' + item.id"
        >
          <h3>{{ item.newsTitle }}</h3>
          <div>
            <img v-lazy="item.newsImg" alt="" />
          </div>
          <p>{{ item.newsCon }}</p>
          <p>发布日期 {{ item.newsTime }}</p>
        </van-cell>
      </van-list>
      <van-loading size="24px" v-if="isloading">加载中...</van-loading>
      <button v-else class="more" @click="getMore">
        {{ moreText }}
      </button>
    </div>

    <v-footer></v-footer>
  </div>
</template>
<script>
import header from "@/components/header/index.vue";
import footer from "@/components/footer/index.vue";
export default {
  components: {
    "v-header": header,
    "v-footer": footer,
  },
  data() {
    return {
      news: [],
      isloading: false,
      hasMore: false,
    };
  },
  methods: {
    async getNews() {
      const res = await this.$http.getNewsData();
      res.data.forEach((msg) => {
        this.news.push(msg);
      });
    },
    getMore() {
      if (this.hasMore !== false) return;
      this.isloading = true;
      this.hasMore = true;
      this.timer = setTimeout(() => {
        this.isloading = false;
      }, 500);
    },
  },
  computed: {
    moreText() {
      return this.hasMore ? "已经加载到尽头了" : "加载更多";
    },
  },
  created() {
    this.getNews();
  },
};
</script>
<style lang="scss" scoped>
.news {
  .listCon {
    margin-top: 46px;
    margin-bottom: 62px;
    .list {
      h3 {
        font-weight: normal;
        font-size: 18px;
      }
      p {
        font-size: 11px;
      }
      img {
        width: 100%;
      }
      .van-cell__value {
        border-bottom: 1px dashed #ccc;
      }
      .van-loading {
        text-align: center;
      }
    }
    .van-loading {
      text-align: center;
    }
    .more {
      border: none;
      background-color: #fff;
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #ccc;
    }
  }
}
</style>
